<template>
  <div class="gallery-preview-container">
    <md-toolbar class="md-primary">
      <md-button @click.native="goBack" class="md-icon-button">
        <md-icon>keyboard_backspace</md-icon>
      </md-button>
      <h2 class="md-title" style="flex: 1">画廊预览</h2>
      <md-button @click.native="openDialog('jumpDialog')" id="jump" class="md-icon-button">
        <md-icon>{{jumpIconClass}}</md-icon>
      </md-button>
    </md-toolbar>
    <mt-loadmore v-if="!previewList.showLoading" class="scrollable preview" :top-method="loadTop" ref="loadmore">
      <md-list v-infinite-scroll="previewLoadMore"
       infinite-scroll-disabled="false"
       infinite-scroll-distance="10">
        <gallery-preview :galleryListData="previewList.data"></gallery-preview>
      </md-list>
      <p class="page-infinite-loading" v-show="previewList.loadMore"><mt-spinner class="loadmore-spinner" type="fading-circle"></mt-spinner>
        加载中...
      </p>
    </mt-loadmore>
    <md-dialog md-open-from="#jump" md-close-to="#jump" ref="jumpDialog">
      <md-dialog-title>跳页</md-dialog-title>
      <md-dialog-content>
        <mt-range v-model="jump" ref="jumper" :min="1" :max="previewList.pageNumber" :step="1" :bar-height="5">
          <div slot="start">1</div>
          <div slot="end">{{previewList.pageNumber}}</div>
        </mt-range>
      </md-dialog-content>
      <md-dialog-actions>
        <md-button class="md-primary" @click.native="jumpTo">给我跳啊！</md-button>
      </md-dialog-actions>
    </md-dialog>
    <md-spinner v-show="previewList.showLoading" class="loading-spinner" :md-size="75" :md-stroke="2" md-indeterminate></md-spinner>
    <photo-swipe v-if="!(thumb.showKey === null)&&common.swipeShow" :slideData="thumb.thumbList"></photo-swipe>
  </div>
</template>

<script>
import {mapState, mapActions, mapMutations} from 'vuex'
import {getGalleryShowKey} from './../../service/getData'
export default {
  data () {
    return {
      jump: 1
    }
  },
  computed: {
    ...mapState([
      'previewList',
      'thumb',
      'common'
    ]),
    jumpIconClass () {
      if (this.previewList.pageNumber <= 9) {
        return `filter_${this.previewList.pageNumber}`
      } else {
        return 'filter_9_plus'
      }
    }
  },
  methods: {
    ...mapActions([
      'initPreviewList',
      'previewLoadMore',
      'previewLoadTop'
    ]),
    ...mapMutations([
      'SET_THUMB'
    ]),
    async initData (pageNo) {
      let gid = this.$route.params.gid
      let token = this.$route.params.token
      try {
        await this.initPreviewList({gid, token, pageNo})
        if (gid === this.thumb.gid) {
          return
        }
        let showKey = await getGalleryShowKey(this.previewList.data[0].href)
        this.SET_THUMB({gid, token, showKey: showKey.payload, galleryLength: this.previewList.pageLength})
        console.log(this.thumb.showKey === null)
      } catch (e) {
      }
    },
    async loadTop () {
      this.previewLoadTop(this.$refs)
    },
    goBack () {
      this.$router.go(-1)
    },
    openDialog (ref) {
      this.$refs[ref].open()
    },
    jumpTo () {
      this.initData(this.jump)
      this.$refs.jumpDialog.close()
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.initData(1)
    })
  },
  components: {
    galleryPreview: require('./../../components/common/galleryDetailList'),
    photoSwipe: require('./../../components/common/photoSwipe')
  }
}
</script>

<style scoped>
.scrollable.preview {
  overflow: auto;
  height:calc(100% - 64px);
  -webkit-overflow-scrolling : touch;
}
.loading-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -32.5px;
  margin-top: -32.5px;
}
.gallery-preview-container {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-flow: column;
  flex-flow: column;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.page-infinite-loading {
  text-align: center;
  height: 30px;
  line-height: 30px;
  margin: 0
}
.loadmore-spinner {
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
}
.swiper-container {
  margin-left: auto;
  margin-right: auto;
  position: fixed;
  overflow: hidden;
  z-index: 999;
  top: 0;
  height: 100%;
  bottom: 0;
  left: 0;
  width: 100%;
}
</style>
